import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:provider/provider.dart';

import '../../../config/route/bt_app_router.gr.dart';
import '../../../data/models/bt_goods.dart';
import '../../../widgets/pagination/bt_first_page_error_indicator.dart';
import '../../../widgets/pagination/bt_first_page_progress_indicator.dart';
import '../../../widgets/pagination/bt_new_page_error_indicator.dart';
import '../../../widgets/pagination/bt_new_page_progress_indicator.dart';
import '../../../widgets/pagination/bt_no_items_found_indicator.dart';
import '../../../widgets/pagination/bt_no_more_items_indicator.dart';
import '../../utils/bt_app_bar_utils.dart';
import '../models/bt_coin_shop_model.dart';
import '../widgets/bt_goods_item_widget.dart';

@RoutePage(name: "coinShopRoute")
class BtCoinShopPage extends StatelessWidget {
  const BtCoinShopPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BtCoinShopModel(),
      child: Consumer<BtCoinShopModel>(builder: (context, model, _) {
        return Stack(
          children: [
            Image.asset(
              width: double.infinity,
              'assets/images/bt_coin_shop_full_bg.png',
              fit: BoxFit.fill,
            ),
            appBar(
                context,
                'Coin Shop',
                [
                  Padding(
                      padding: const EdgeInsets.only(right: 20),
                      child: InkWell(
                        child: Image.asset(
                          'assets/images/bt_icon_cs.png',
                          width: 32,
                          height: 32,
                        ),
                        onTap: () {
                          context.router.navigate(
                              ChatRoute(targetId: model.userServiceId, targetName: '', targetAvatar: ''));
                        },
                      ))
                ],
                black: false),
            Container(
                width: MediaQuery.of(context).size.width,
                margin: const EdgeInsets.only(top: 118),
                padding: const EdgeInsets.only(left: 19, right: 19),
                child: Stack(
                  children: [
                    Image.asset(
                      width: MediaQuery.of(context).size.width - 40,
                      height: 154,
                      'assets/images/bt_coins_bg.png',
                      fit: BoxFit.fitWidth,
                    ),
                    Padding(
                        padding: const EdgeInsets.only(left: 202, top: 40),
                        child: Text('${model.availableCoins}',
                            style: const TextStyle(
                                fontSize: 32, color: Color(0xFF3F5FCF), fontWeight: FontWeight.bold))),
                    const Padding(
                      padding: EdgeInsets.only(left: 203, top: 92),
                      child: Text("My Coins",
                          style:
                              TextStyle(fontSize: 14, color: Color(0xFF3F5FCF), fontWeight: FontWeight.bold)),
                    )
                  ],
                )),
            Container(
                margin: const EdgeInsets.only(top: 288),
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: RefreshIndicator(
                  onRefresh: () => Future.sync(
                    () => model.pagingController.refresh(),
                  ),
                  child: MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: PagedListView<int, BtGoods>(
                      pagingController: model.pagingController,
                      builderDelegate: PagedChildBuilderDelegate<BtGoods>(
                        itemBuilder: (context, item, index) {
                          return Column(
                            children: [
                              const Divider(
                                height: 15,
                                thickness: 1,
                                color: Colors.transparent,
                              ),
                              BtGoodsItemWidget(index: index, item: item, model: model)
                            ],
                          );
                        },
                        firstPageErrorIndicatorBuilder: (_) => BtFirstPageErrorIndicator(
                          error: model.pagingController.error,
                          onTryAgain: () => model.pagingController.refresh(),
                        ),
                        newPageErrorIndicatorBuilder: (_) => BtNewPageErrorIndicator(
                          error: model.pagingController.error,
                          onTap: () => model.pagingController.retryLastFailedRequest(),
                        ),
                        firstPageProgressIndicatorBuilder: (_) => const BtFirstPageProgressIndicator(),
                        newPageProgressIndicatorBuilder: (_) => const Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
                          child: BtNewPageProgressIndicator(),
                        ),
                        noItemsFoundIndicatorBuilder: (_) => const Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
                          child: BtNoItemsFoundIndicator(),
                        ),
                        noMoreItemsIndicatorBuilder: (_) => const Padding(
                          padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
                          child: BtNoMoreItemsIndicator(),
                        ),
                      ),
                    ),
                  ),
                )),
          ],
        );
      }),
    );
  }
}
